<template>
  <div class="w-full flex justify-center items-center">
    <h3 class="text-2xl font-bold mb-4">
      {{ $t("aboutTravelAi.Intelligent") }}
    </h3>
  </div>
  <div class="w-full flex justify-start items-start mb-12">
    <div
      class="oneStop w-1/2 flex justify-center items-end pb-4 text-[#fff] text-large"
    >
      {{ $t("aboutTravelAi.OneStop") }}
    </div>
    <ul class="ml-8 flex flex-col justify-between items-start ulStyle">
      <li v-for="(item, index) of onStopList" :key="index">
        <img :src="getImgUrl(item.imgUrl)" alt="" width="30" height="30" />
        <span>{{ item.text }}</span>
      </li>
    </ul>
  </div>
  <div class="w-full flex justify-start items-start mb-10">
    <ul class="mr-8 flex flex-col justify-between items-start autoUlStyle">
      <li v-for="(item, index) of automatedList" :key="index">
        <img :src="getImgUrl(item.imgUrl)" alt="" width="30" height="30" />
        <span>{{ item.text }}</span>
      </li>
    </ul>
    <div
      class="automated w-1/2 flex justify-center items-end pb-4 text-[#fff] text-large"
    >
      {{ $t("aboutTravelAi.Automated") }}
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const onStopList = computed(() => {
  return [
    {
      text: t("aboutTravelAi.OneStopTip1"),
      imgUrl: "../../../assets/images/aboutTravelAi/1.png",
    },
    {
      text: t("aboutTravelAi.OneStopTip2"),
      imgUrl: "../../../assets/images/aboutTravelAi/2.png",
    },
    {
      text: t("aboutTravelAi.OneStopTip3"),
      imgUrl: "../../../assets/images/aboutTravelAi/3.png",
    },
  ];
});

const automatedList = computed(() => {
  return [
    {
      text: t("aboutTravelAi.OneStopTip4"),
      imgUrl: "../../../assets/images/aboutTravelAi/1.png",
    },
    {
      text: t("aboutTravelAi.OneStopTip5"),
      imgUrl: "../../../assets/images/aboutTravelAi/2.png",
    },
    {
      text: t("aboutTravelAi.OneStopTip6"),
      imgUrl: "../../../assets/images/aboutTravelAi/3.png",
    },
  ];
});

const getImgUrl = (url) => {
  return new URL(url, import.meta.url).href;
};
</script>
<style scoped lang="scss">
.ulStyle {
  li {
    border: 1px solid #f6f8fe;
    padding: 5% 10%;
    border-radius: 15px;
    width: 100%;
    height: 100px;
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    color: #636363;
    position: relative;
    &:last-child {
      margin-bottom: 0;
    }
    img {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
.autoUlStyle {
  li {
    border: 1px solid #f6f8fe;
    padding: 5% 10%;
    border-radius: 15px;
    width: 100%;
    height: 100px;
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    color: #636363;
    position: relative;
    &:last-child {
      margin-bottom: 0;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
.oneStop {
  background: url(@/assets/images/aboutTravelAi/feature-1.png) no-repeat;
  background-size: cover;
  background-position: center; /* 确保图片在元素中心 */
  width: 50%;
  height: 320px;
  border-radius: 10px;
}
.automated {
  background: url(@/assets/images/aboutTravelAi/feature-2.png) no-repeat;
  background-size: cover;
  background-position: center; /* 确保图片在元素中心 */
  border-radius: 10px;
  width: 50%;
  height: 320px;
}
</style>
